{% extends "layout.html" %}

{% block title %}Held{% endblock %}

{% block content %}
<section class="landing">
    <div class="landing-copy">
        <h1>Held</h1>
        <p class="tagline">
            When someone you love needs help, you shouldn't have to
            coordinate it alone.
        </p>
        <p class="subtagline">
            Create a private circle. Invite family and friends.
            See what's covered. Step in where you're needed.
        </p>

        <div class="landing-actions">
            <a class="button" href="{{ url_for('create_circle') }}">Create a circle</a>
            <a class="button secondary" href="#join">Join a circle</a>
        </div>
    </div>

    <div class="landing-illustration" aria-hidden="true">
        <svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
            <!-- faint connecting lines from center to each figure -->
            <g stroke="var(--illustration-line)" stroke-width="2" stroke-dasharray="4 6">
                <line x1="200" y1="200" x2="330" y2="200" />
                <line x1="200" y1="200" x2="265" y2="313" />
                <line x1="200" y1="200" x2="135" y2="313" />
                <line x1="200" y1="200" x2="70" y2="200" />
                <line x1="200" y1="200" x2="135" y2="87" />
                <line x1="200" y1="200" x2="265" y2="87" />
            </g>

            <!-- six figures in a ring -->
            <g fill="var(--illustration-ring)">
                <circle cx="330" cy="188" r="14" />
                <rect x="310" y="205" width="40" height="30" rx="15" />

                <circle cx="265" cy="301" r="14" />
                <rect x="245" y="318" width="40" height="30" rx="15" />

                <circle cx="135" cy="301" r="14" />
                <rect x="115" y="318" width="40" height="30" rx="15" />

                <circle cx="70" cy="188" r="14" />
                <rect x="50" y="205" width="40" height="30" rx="15" />

                <circle cx="135" cy="75" r="14" />
                <rect x="115" y="92" width="40" height="30" rx="15" />

                <circle cx="265" cy="75" r="14" />
                <rect x="245" y="92" width="40" height="30" rx="15" />
            </g>

            <!-- the central figure, held -->
            <g fill="var(--illustration-center)">
                <circle cx="200" cy="176" r="22" />
                <rect x="168" y="200" width="64" height="46" rx="22" />
            </g>
        </svg>
    </div>
</section>

<section id="join" class="card narrow join-card">
    <h2>Already have a code?</h2>
    <form method="POST" action="{{ url_for('join_circle') }}">
        <label for="code">Circle code</label>
        <input type="text" id="code" name="code" placeholder="e.g. A1B2C3" required>
        <button type="submit" class="button">Join circle</button>
    </form>
    {% if join_error %}
        <p class="error">{{ join_error }}</p>
    {% endif %}
    <p class="hint">Or open the invite link someone sent you — it joins you in one tap.</p>
</section>
{% endblock %}